<?php if (!defined('THINK_PATH')) exit();?><!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<style type="text/css">
		textarea{
			width: 300px;
			height: 100px;
		}
		.file{
			-webkit-appearance:none;
		}
		#image{
			width: 80px;
			height: 80px;
		}
		img{
			width: 100%;
			height: 100%:;
		}
	</style>
	 <script type="text/javascript" src="/Public/Moble_home/js/jquery.min.js"></script>
</head>
<body>
	<div>
		<form action="/index.php/Home/Comment/upload/id/1"  enctype="multipart/form-data" method="post">
			<textarea name="content" placeholder="请畅所欲言！"></textarea><br/><br/>
			<div class="show">
				<div class="img_div">
					<p id="image"></p>
				</div>
			</div>
		    <input type="file" name="photo1" value="上传图片" class="file" multiple="multiple" /><br/><br/>
			<input type="file" name="photo2" value="上传图片" class="file" multiple="multiple" /><br/><br/>
			<input type="file" name="photo3" value="上传图片" class="file" multiple="multiple" /><br/><br/>
			商品评价：<input type="text" name="goods" /><br/><br/>
			物流评价：<input type="text" name="wuliu" /><br/><br/>
			客服评价：<input type="text" name="kefu" /><br/>
			<input type="submit" value="提交" />
		</form>

		<script type="text/javascript">
	        window.onload = function(){
	        	var files = $(".file");
	        	var i=0;
	        	$(".show").hide();
	        	$(files).each(function(){

	        		$(this).change(function(e){
						$(".show").show();
	        			var ev = e||event;
    					var file = ev.target.files[0];
    					//图片缓存对象
    					var reader = new FileReader();
    					//以base64进行路径转码
    					reader.readAsDataURL(file);
	        			//文件加载后
	        			reader.onloadend = function (e) {
	        				//获取转码后的路径
       						 var dataURL = reader.result;
       						 /*
       						 var name = file.name,
       						 	 size = Math.round(file.size / 1024);
       						*/
       						//获取缩略图区块，并动态添加img
       						var obj = document.getElementById("image");
       						var img = document.createElement("img");
       						obj.appendChild(img);
       						img.setAttribute("src",dataURL);
    					};
	        		});
	        		i++;
	        	})
	        	/*
    			var obj = document.getElementById("file");
    			obj.onchange=function(e){
    				var ev = e||event;
    				var file = ev.target.files[0];
    				var reader = new FileReader();
    				reader.readAsDataURL(file);
	        		//文件加载后
	        		reader.onloadend = function (e) {
       					 var dataURL = reader.result;
       					     image = '<img src="'+dataURL+'"/>'; //预览图片
       					 var name = file.name,size = Math.round(file.size / 1024);
       					 var div = '<p>图片名: '+name+'</p><p>图片大小: '+size+'kb</p>';
       					 var imglist = '<div class="img_box"><p class="image">'+image+"</p>"+ div+'</div>';
    				     $(".show").html(imglist);      
    				     $(".image").css({
    				     	"width":"80px",
    				     	"height":"80px",	
    				     });
    				      $("img").css({
    				     	"height":"100%",
    				     	"display":"block",
    				     	"margin":"0 auto"
    				     });
    				};
    			}
	        	//新建FileReader对象
	        	*/
	        }
		</script>
		<ul>
			<li>
				<p>头像</p>
				<p>评论内容</p>
				<p>图片1  图片2  图片3  图片4</p>
			</li>

			<li>
				<p>头像</p>
				<p>评论内容</p>
				<p>图片1  图片2  图片3  图片4</p>
			</li>

			<li>
				<p>头像</p>
				<p>评论内容</p>
				<p>图片1  图片2  图片3  图片4</p>
			</li>

			<li>
				<p>头像</p>
				<p>评论内容</p>
				<p>图片1  图片2  图片3  图片4</p>
			</li>

			<li>
				<p>头像</p>
				<p>评论内容</p>
				<p>图片1  图片2  图片3  图片4</p>
			</li>
		</ul>
	</div>
</body>
</html>